<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_Storage-local和session区别</title>
  <!-- 
  在 JavaScript 中， `localStorage`  和  `sessionStorage`  是 Web Storage API 的两个重要部分，它们用于在浏览器中存储数据。虽然它们在功能上有很多相似之处，但它们之间有一些关键的区别。
  一、基本定义
  - localStorage：用于在浏览器中以键值对的形式存储数据，数据在浏览器关闭后依然存在，直到主动删除。
    
  - sessionStorage：用于在浏览器会话中存储数据，数据仅在当前会话中有效，浏览器窗口或标签页关闭后数据会被清除。

  二、主要区别
  | 特性               | localStorage                        | sessionStorage                     |
  |--------------------|------------------------------------|------------------------------------|
  | 存储持续时间   | 数据在浏览器关闭后依然存在       | 数据在浏览器窗口或标签页关闭后清除 |
  | 作用域         | 在同一源（协议、域名和端口）下的所有窗口和标签页共享数据 | 仅在当前窗口或标签页中有效         |
  | 存储大小       | 大约 5-10MB（具体取决于浏览器）   | 大约 5-10MB（具体取决于浏览器）   |
  | API 方法       |  `setItem()` ,  `getItem()` ,  `removeItem()` ,  `clear()` ,  `key()`  |  `setItem()` ,  `getItem()` ,  `removeItem()` ,  `clear()` ,  `key()`  |
  | 使用场景       | 适合存储用户偏好、主题设置、长期保存的数据 | 适合存储临时数据，如表单数据、用户会话信息 |

  三、API 方法
   1. localStorage 示例
  // 存储数据
  localStorage.setItem('username', '小明');

  // 获取数据
  const username = localStorage.getItem('username');
  console.log(username); // 输出: 小明

  // 删除数据
  localStorage.removeItem('username');

  // 清空所有数据
  localStorage.clear();
   2. sessionStorage 示例
  // 存储数据
  sessionStorage.setItem('sessionId', '123456');

  // 获取数据
  const sessionId = sessionStorage.getItem('sessionId');
  console.log(sessionId); // 输出: 123456

  // 删除数据
  sessionStorage.removeItem('sessionId');

  // 清空所有数据
  sessionStorage.clear();
  四、总结
  - localStorage 适合用于需要长期存储的数据，数据在浏览器关闭后依然存在。
  - sessionStorage 适合用于临时数据存储，数据在当前会话结束后被清空。
  - 两者都提供了相似的 API 方法，使用起来非常方便。
  -->
</head>
<body>

  <a href="./static/about.html" target="_blank">about</a>

  <script>
    // 1. 验证一: 关闭网页
    // // 1.1 localStorage: 不会消失
    // localStorage.setItem('name', 'lisi')
    // // 1.2 sessionStorage: 会消失
    // sessionStorage.setItem('name', 'lisi')

    // // 2. 验证二: 打开新窗口
    // // 2.1 localStorage: 不会消失
    // localStorage.setItem('name', 'lisi')
    // // 2.2 sessionStorage: 会消失
    // sessionStorage.setItem('name', 'lisi')

    // 3. 验证三: 关闭浏览器
    // 3.1 localStorage: 不会消失
    localStorage.setItem('name', 'lisi')
    // 3.2 sessionStorage: 会消失
    sessionStorage.setItem('name', 'lisi')



  </script>
  
</body>
</html>